<!DOCTYPE html>
<html class="wide wow-animation" lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
  <head>
    <title>Single Product</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script th:src="@{/cdn-cgi/apps/head/3ts2ksMwXvKRuG480KNifJ2_JNM.js}"></script><link rel="icon" th:href="@{/images/favicon.ico}" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700%7CLato%7CKalam:300,400,700">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/fonts.css}">
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>.ie-panel{display: none;background: #212121;padding: 10px 0;box-shadow: 3px 3px 5px 0 rgba(0,0,0,.3);clear: both;text-align:center;position: relative;z-index: 1;} html.ie-10 .ie-panel, html.lt-ie-10 .ie-panel {display: block;}</style>
  </head>
  <body>
    <div class="ie-panel"><a th:href="@{http://windows.microsoft.com/en-US/internet-explorer/}"><img th:src="@{/images/ie8-panel/warning_bar_0000_us.jpg}" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."></a></div>
    <div class="preloader">
      <div class="preloader-body">
        <div class="cssload-bell">
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
          <div class="cssload-circle">
            <div class="cssload-inner"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="page">
      <!-- Page Header-->
      <header class="section page-header">
        <!-- RD Navbar-->
        <div class="rd-navbar-wrap">
          <nav class="rd-navbar rd-navbar-creative rd-navbar-creative-2" data-layout="rd-navbar-fixed" data-sm-layout="rd-navbar-fixed" data-md-layout="rd-navbar-fixed" data-md-device-layout="rd-navbar-fixed" data-lg-layout="rd-navbar-static" data-lg-device-layout="rd-navbar-fixed" data-xl-layout="rd-navbar-static" data-xl-device-layout="rd-navbar-static" data-xxl-layout="rd-navbar-static" data-xxl-device-layout="rd-navbar-static" data-lg-stick-up-offset="100px" data-xl-stick-up-offset="112px" data-xxl-stick-up-offset="132px" data-lg-stick-up="true" data-xl-stick-up="true" data-xxl-stick-up="true">
            <div class="rd-navbar-collapse-toggle rd-navbar-fixed-element-1" data-rd-navbar-toggle=".rd-navbar-collapse"><span></span></div>
            <div class="rd-navbar-aside-outer">
              <div class="rd-navbar-aside">
                <div class="rd-navbar-collapse">
                  <ul class="contacts-classic">
                    <li><span class="contacts-classic-title">Call us:</span>+(86) 13434985070
                    </li>
                    <li>1057071216@qq.com</li>
                  </ul><a class="rd-navbar-basket rd-navbar-basket-mobile fl-bigmug-line-shopping202" href="#"><span>2</span></a>
                </div>
                <!-- RD Navbar Panel-->
                <div class="rd-navbar-panel">
                  <!-- RD Navbar Toggle-->
                  <button class="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap"><span></span></button>
                  <!-- RD Navbar Brand-->
                  <div class="rd-navbar-brand">
                    <!--Brand--><a class="brand" th:href="@{/index.html}"><img class="brand-logo-dark" th:src="@{/images/logo-default-234x82.png}" alt="" width="117" height="41"/><img class="brand-logo-light" th:src="@{/images/logo-inverse-234x82.png}" alt="" width="117" height="41"/></a>
                  </div>
                </div>
                <div class="rd-navbar-aside-element">
                  <!-- RD Navbar Search-->
                  <div class="rd-navbar-search rd-navbar-search-2">
                    <button class="rd-navbar-search-toggle rd-navbar-fixed-element-3" data-rd-navbar-toggle=".rd-navbar-search"><span></span></button>
                    <form class="rd-search" action="search-results.html" data-search-live="rd-search-results-live" method="GET">
                      <div class="form-wrap">
                        <input class="rd-navbar-search-form-input form-input" id="rd-navbar-search-form-input" type="text" name="s" autocomplete="off"/>
                        <label class="form-label" for="rd-navbar-search-form-input">Search...</label>
                        <div class="rd-search-results-live" id="rd-search-results-live"></div>
                        <button class="rd-search-form-submit fl-bigmug-line-search74" type="submit"></button>
                      </div>
                    </form>
                  </div>
                  <!-- RD Navbar Basket-->
                  <div class="rd-navbar-fixed-element-2 select-inline">
                    <div class="rd-navbar-fixed-element-2 select-inline">
                      <a th:if="${session.user}" class="team-info-figure" th:href="@{/personal-center}">
                        <img th:src="@{${session.user.pictureUrl}}" width=50 height=50>
                      </a>
                      <a th:unless="${session.user}" class="team-info-figure" th:href="@{/personal-center}">
                        <img th:src="@{/img/UserHead/headpicturedefalut.jpg}" width=50 height=50>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="rd-navbar-main-outer">
              <div class="rd-navbar-main">
                <div class="rd-navbar-nav-wrap">
                  <ul class="rd-navbar-nav">
                    <li class="rd-nav-item"><a class="rd-nav-link" th:href="@{/home.html}">首页</a></li>
                    <li class="rd-nav-item"><a class="rd-nav-link" th:href="@{/grid-shop.html}">商城</a></li>
                    <li class="rd-nav-item"><a class="rd-nav-link" th:href="@{/order-page.html}">求购广场</a></li>
                    <li class="rd-nav-item active"><a class="rd-nav-link" th:href="@{/freeshare.html}">免费分享区</a></li>
                    <li class="rd-nav-item"><a class="rd-nav-link" th:href="@{/blog-list.html}">合作推广</a>
                      <ul class="rd-menu rd-navbar-dropdown">
                        <li class="rd-dropdown-item"><a class="rd-dropdown-link" th:href="@{/templates/single-post.html}">我要提建议</a></li>
                        <li class="rd-dropdown-item"><a class="rd-dropdown-link" th:href="@{/templates/single-post.html}">商务合作</a></li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </div>

          </nav>
        </div>
      </header>

      <section class="breadcrumbs-custom">
        <div class="parallax-container" data-parallax-img="images/bg-about.jpg">
          <div class="breadcrumbs-custom-body parallax-content context-dark">
            <div class="container">
              <h2 class="text-transform-capitalize breadcrumbs-custom-title">Single Product</h2>
              <h5 class="breadcrumbs-custom-text">We are industry-leading organic farm delivering the best products <br class="d-none d-md-block">that boost your daily life energy and potential.</h5>
            </div>
          </div>
        </div>
        <div class="breadcrumbs-custom-footer">
          <div class="container">
            <ul class="breadcrumbs-custom-path">
              <li><a th:href="@{/index.html}">Home</a></li>
              <li><a th:href="@{/grid-shop.html}">Shop</a></li>
              <li class="active">Single Product</li>
            </ul>
          </div>
        </div>
      </section>


      <!-- Single Product-->
      <section class="section section-sm section-first bg-default">
        <div class="container">
          <div class="row row-30">
            <div class="col-lg-6">
              <div class="slick-vertical slick-product">
                <!-- Slick Carousel-->
                <div class="slick-slider carousel-parent" id="carousel-parent" data-items="1" data-swipe="true" data-child="#child-carousel" data-for="#child-carousel">
                  <div class="item">
                    <div class="slick-product-figure"><img th:src="@{/img/ComPicture/{pi}.jpg(pi=${commodity.id})}" alt="" width="530" height="480"/>
                    </div>
                  </div>
                  <div class="item">
                    <div class="slick-product-figure"><img th:src="@{/img/ComPicture/{pi}.jpg(pi=${commodity.id})}" alt="" width="530" height="480"/>
                    </div>
                  </div>
                </div>

                <div class="slick-slider child-carousel slick-nav-1" id="child-carousel" data-arrows="true" data-items="3" data-sm-items="3" data-md-items="3" data-lg-items="3" data-xl-items="3" data-xxl-items="3" data-md-vertical="true" data-for="#carousel-parent">
                  <div class="item">
                    <div class="slick-product-figure"><img th:src="@{/img/ComPicture/{pi}.jpg(pi=${commodity.id})}" alt="" width="250" height="250"/>
                    </div>
                  </div>
                  <div class="item">
                    <div class="slick-product-figure"><img th:src="@{/img/ComPicture/{pi}.jpg(pi=${commodity.id})}" alt="" width="250" height="250"/>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-6">
            <div class="single-product">


              <h5 class="text-transform-none font-weight-medium" th:text="${commodity.name}">商品名</h5>

              <div class="group-md group-middle">

                <div class="single-product-price" th:text="${commodity.price}">￥商品价格</div>

                <!--
              <div class="single-product-rating"><span class="icon mdi mdi-star"></span><span class="icon mdi mdi-star"></span><span class="icon mdi mdi-star"></span><span class="icon mdi mdi-star"></span><span class="icon mdi mdi-star-half"></span></div>
                    -->
              </div>

              <p  th:text="${commodity.describe}">卖家描述商品</p>
              <hr class="hr-gray-100">
              <!--
            <ul class="list list-description">
              <li><span>Categories:</span><span>Avocados</span></li>
              <li><span>Weight:</span><span>1 kg</span></li>
              <li><span>Box:</span><span>60 x 60 x 90 cm</span></li>
            </ul>
              -->
              <div class="group-xs group-middle">
                <!--
              <div class="product-stepper">
                <input class="form-input" type="number" data-zeros="true" value="1" min="1" max="1000">
              </div>
                 -->
                <p  th:text="${user.wechat}">微信号</p>
                <p  th:text="${user.qq}">qq号</p>
                <p  th:text="${user.phone}">手机号</p>
              </div>
              <hr class="hr-gray-100">
              <!--
            <div class="group-xs group-middle"><span class="list-social-title">Share</span>
              <div>
                <ul class="list-inline list-social list-inline-sm">
                  <li><a class="icon mdi mdi-facebook" href="#"></a></li>
                  <li><a class="icon mdi mdi-twitter" href="#"></a></li>
                  <li><a class="icon mdi mdi-instagram" href="#"></a></li>
                  <li><a class="icon mdi mdi-google-plus" href="#"></a></li>
                </ul>
              </div>
            </div>
              -->
            </div>

            </div>
          </div>
        </div>
      </section>


      <!-- Page Footer-->
      <footer class="section footer-modern footer-modern-2">
        <div class="footer-modern-body section-xl context-dark">
          <div class="container">
            <div class="row row-40 row-md-50 justify-content-xl-between">
              <div class="col-md-10 col-lg-3 col-xl-4 wow fadeInRight">
                <div class="inset-xl-right-70 block-1">
                  <h5 class="footer-modern-title">仅供展示</h5>
                  <div class="row row-10 gutters-10" data-lightgallery="group">
                    <div class="col-4 col-sm-2 col-lg-4">
                      <!-- Thumbnail Minimal--><img th:src="@{/images/grid-gallery-1-93x93.jpg}" alt="" width="93" height="93"/></img>
                    </div>
                    <div class="col-4 col-sm-2 col-lg-4">
                      <!-- Thumbnail Minimal--><img th:src="@{/images/grid-gallery-2-93x93.jpg}" alt="" width="93" height="93"/></img>
                    </div>
                    <div class="col-4 col-sm-2 col-lg-4">
                      <!-- Thumbnail Minimal--><img th:src="@{/images/grid-gallery-3-93x93.jpg}" alt="" width="93" height="93"/></img>
                    </div>
                    <div class="col-4 col-sm-2 col-lg-4">
                      <!-- Thumbnail Minimal--><img th:src="@{/images/grid-gallery-4-93x93.jpg}" alt="" width="93" height="93"/></img>
                    </div>
                    <div class="col-4 col-sm-2 col-lg-4">
                      <!-- Thumbnail Minimal--><img th:src="@{/images/grid-gallery-5-93x93.jpg}" alt="" width="93" height="93"/></img>
                    </div>
                    <div class="col-4 col-sm-2 col-lg-4">
                      <!-- Thumbnail Minimal--><img th:src="@{/images/grid-gallery-6-93x93.jpg}" alt="" width="93" height="93"/></img>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-6 col-md-7 col-lg-5 wow fadeInRight" data-wow-delay=".1s">
                <h5 class="footer-modern-title">防范与举报</h5>
                <ul class="footer-modern-list footer-modern-list-2 d-sm-inline-block d-md-block">
                  <li><a href=http://www.cyberpolice.cn/wfjb/ target=_blank>网络警察提醒您</a></li>
                  <li><a href=https://www.12377.cn/ target=_blank>网上有害信息举报专区</a></li>
                  <li><a href=https://www.12377.cn/node_548446.htm target=_blank>网络举报APP下载</a></li>
                  <li><a href=http://www.shdf.gov.cn/shdf/channels/740.html target="_blank">扫黄打非网举报专区</a></li>
                </ul>
              </div>
              <div class="col-sm-6 col-md-5 col-lg-4 col-xl-3 wow fadeInRight" data-wow-delay=".2s">
                <h5 class="footer-modern-title">联系我们</h5>
                <ul class="contacts-creative">
                  <li>
                    <div class="unit unit-spacing-sm flex-column flex-md-row">
                      <div class="unit-left"><span class="icon mdi mdi-map-marker"></span></div>
                      <div class="unit-body">惠州学院<br/>北苑2栋527</div>
                    </div>
                  </li>
                  <li>
                    <div class="unit unit-spacing-sm flex-column flex-md-row">
                      <div class="unit-left"><span class="icon mdi mdi-phone"></span></div>
                      <div class="unit-body">+(86) 17817680004</div>
                    </div>
                  </li>
                  <li>
                    <div class="unit unit-spacing-sm flex-column flex-md-row">
                      <div class="unit-left"><span class="icon mdi mdi-email-outline"></span></div>
                      <div class="unit-body">499751933@qq.com</div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
    <div class="snackbars" id="form-output-global"></div>
    <script th:src="@{/js/core.min.js}"></script>
    <script th:src="@{/js/script.js}"></script>
  </body>
</html>